<template>


      <div class="container">
          <dv-decoration-10 style="width:100%;height:0.3rem;" />
          <div class="top">
    <!--        <img src="@/assets/images/topBg.png"  alt="" width="100%"/>-->
            <dv-decoration1 style="width:16rem;height:3.75rem;position: absolute" />
            <div class="top-title">
              {{activeAddress.length===4?activeAddress[3].name:'请选择筛查点'}}
            </div>
            <div class="top-left">
              <div class="top-left-date">
                {{date}}
              </div>
              <div class="top-left-week">
                {{week}}
              </div>
              <div class="top-left-time" style="color:rgba(255, 255, 255, 0.87);">
                {{time}}
              </div>
            </div>
          </div>
          <div class="lable">
            <dv-border-box8 :dur="5" >

              <div class="addrs">
                <div class="addr" v-for="item in activeAddress" :key="item.value" v-if="activeAddress.length>0" >
                  {{ item.name }}
                </div>
                <div class="addr" v-else>
                  请选择筛查地点
                </div>
              </div>

              <div class="operate">
                <div class="back" @click="modifyAddress(item)">
                </div>
                <div class="for" @click="forAddress(item)">
                </div>
              </div>
            </dv-border-box8>
          </div>
          <div class="content">
            <div class="content-left">
              <div class="content-left-top">
                <dv-border-box8 :dur="3"  >
                  <div class="addr-lable">
                    {{ activeAddress.length===0 ?'请选择省份': activeAddress.length===1?'请选择城市':activeAddress.length===2?'请选择区县':'请选择筛查地点' }}
                  </div>
                </dv-border-box8>
              </div>
              <div class="content-left-info">
                <ul  class="infinite-list" style="overflow: auto;scrollbar-width: none;" v-if="addressInfo.length>0">
                  <li @click="chooseAddress(item)" :class="activeAddress.length>0&&activeAddress[activeAddress.length-1].code===item.code?'addr-info-item addr-info-item-active':'addr-info-item addr-info-item-unactive'" v-for="(item,index) in addressInfo" :key="index">
                    <div class="addr-info-item-title">
                      {{String(index).padStart(2, '0')}}
                    </div>
                    <div class="addr-info-item-name" >
                      {{ item.name }}
                    </div>
                  </li>
                </ul>
               <el-empty description="当前地区暂未开通筛查点" v-else style="margin: auto"/>
                <dv-loading v-else>
                    <div style="color: #00D7E9">
                      当前地区暂未开通筛查点
                    </div>
                </dv-loading>
                <dv-loading v-if="siteShow">
                    <div style="color: #00D7E9">
                      Loading...
                    </div>
                </dv-loading>
              </div>
            </div>
            <div class="content-right">
              <div class="search">
                <div :class=" item.value === searchItem ? 'search-item active':'search-item unactive'" v-for="item in search" :key="item.value" @click="changeSearchItem(item.value)">
                  {{item.name}}
                </div>
              </div>
              <div class="info">
                <div class="risk">
                  <div class="risk-top">
                    <div class="risk-title">
                      <div>
                        风险等级统计
                      </div>
                    </div>
                    <div class="decoration3">
                      <dv-decoration3 style="width:100%;height:100%;" />
                    </div>
                  </div>
                  <div class="risk-info">
                    <div id="riskChart" ></div>
                  </div>
                </div>
                <div class="check-age">
                  <div class="check">
                    <div class="check-title">
                      <dv-border-box8 :dur="3" >
                        <div class="check-lable">
                          审核情况统计
                        </div>
                      </dv-border-box8>
                    </div>
                    <div class="check-info">
                      <dv-loading v-if="checkShow">
                          <div style="color: #00D7E9">
                            Loading...
                          </div>
                       </dv-loading>
                      <div class="check-info-nav" v-else>
                        <div class="check-info-item">
                          <div class="check-info-item-num" style="color: #00D7E9">
                            {{ checkCount.total }}
                          </div>
                          <div class="check-info-item-title">
                            筛查总数
                          </div>
                        </div>
                        <div class="check-info-item">
                          <div class="check-info-item-num" style="color: #00aa00">
                            {{ checkCount.auditedTotal }}
                          </div>
                          <div class="check-info-item-title">
                            已审核数
                          </div>
                        </div>
                        <div class="check-info-item">
                          <div class="check-info-item-num" style="color: #9ad6ea">
                            {{ checkCount.unAuditedTotal }}
                          </div>
                          <div class="check-info-item-title">
                            未审核数
                          </div>
                        </div>


                      </div>


                    </div>
                  </div>
                  <div class="age">
                    <div class="age-title">
                      <dv-border-box8 :dur="3"  >
                        <div class="check-lable">
                          年龄分布统计
                        </div>
                      </dv-border-box8>
                    </div>
                    <div class="age-info">
                      <div id="ageChart" ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>


</template>

<script setup>
  import {ref,reactive,computed,onMounted,onBeforeMount } from 'vue'
  import {useAllProvinces,useCitiesByProvinceCode,useAreasByCityCode } from '@/utils/address.js'
  import {getSiteByAddr,getDefaultAddr,setDefaultAddr,getCheckCount,getRiskTypeCount,getAgeCount,getProvinceList,getCityList,getDisrictList} from '@/api/index.js'
  import * as echarts from 'echarts'


  //年龄分布数据统计
  const ageData = ref({
     tooltip: {
      trigger: 'item',
    },
    grid:{
      left: '6%',
      right: '6%',
      top: '10%',
      bottom: '8%',
    },
    xAxis: {
      name: '年龄',
      type: 'category',
       nameTextStyle:{
        fontSize: 14,
        fontWeight: 'bold',
      },
      data: ['0-9岁', '10-19岁', '20-29岁', '30-39岁', '40-49岁', '50-59岁', '60-69岁','70-79岁','80-89岁','90岁+'],

    },
    yAxis: {
      type: 'value',
      name: '人数',
      nameTextStyle:{
        fontSize: 14,
        fontWeight: 'bold',
      }
    },
    series: [
      {
        name: '年龄分布统计',
        data: [0, 0, 0, 0, 0, 0, 0,0,0,0],
        type: 'bar',
        itemStyle:{
          borderRadius:[15,15,0,0],
        },
        label:{
          show: true,
          color: '#fff',
          fontSize: 14,
          fontWeight: 'bold',
          position: 'top',
        }
      }
    ],
    textStyle:{
       color: '#00D7E9',
    }
  })

  //风险等级数据
  const riskData = ref({

    tooltip: {
      trigger: 'item',
      animationDurationUpdate: 300,
    },
    legend: {
      bottom: '5%',
      left: 'center',
      textStyle:{
        color: '#00D7E9',
        fontSize: 14,
        fontWeight: '500'
      },
    },
    // color: ['#91cc75', '#73c0de', '#fac858','#ee6666'],
    series: [
      {
        name: '风险等级统计',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center',
          color: 'inherit',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 0, name: '未知类' ,itemStyle:{color: '#73c0de'}},
          { value: 0, name: '低风险' ,itemStyle:{color: '#91cc75'}},
          { value: 0, name: '中风险' ,itemStyle:{color: '#fac858'}},
          { value: 0, name: '高风险' ,itemStyle:{color: '#ee6666'}}
        ],
      }
    ]
  });





  //审核情况统计数据
  const checkCount = ref({
    auditedTotal: 0,
    total: 0,
    unAuditedTotal:0
  });

  //是否显示审核加载
  const checkShow = ref(false);


  //获取地址信息
  const addressInfo = ref([]);

  //当前选中地址集合
  const activeAddress = ref([
      // {name: '四川省', code: '510000'},
      // {name: '成都市', code: '510100'},
      // {name: '武侯区', code: '510107'},
      // {name: '爱迦筛查中心', code: '1506534114297208833'}
  ]);

  //后退前的地址
  const beforeAddress = ref([]);

  // //当前省份
  // const provinces = ref();
  // //当前城市
  // const citys = ref();
  // //当前区县
  // const areas = ref();

  //获取数据
  const getData =()=>{
    checkShow.value = true;


    let params = {
      "type": searchItem.value,
      "yybm": activeAddress.value.length > 0 ? activeAddress.value[activeAddress.value.length-1].code : ''
    }
    getCheckCount(params).then(res=>{
      console.log("审核数据统计",res)
      if(res.data!==null){
        checkCount.value = res.data
      }else {
        checkCount.value = {
          auditedTotal: 0,
          total: 0,
          unAuditedTotal:0
        }
      }

      checkShow.value = false
    })


    getRiskTypeCount(params).then(res=>{
      // console.log("风险等级数据统计",res)
      if(res.data.length>0){
        riskData.value.series[0].data =[]
        let riskDatas = res.data
        riskDatas.forEach(item=>{
           switch (item.name){
            case '正常':
              riskData.value.series[0].data[0]={ value: item.value, name: '未知类' ,itemStyle:{color: '#73c0de'} }
              break;
            case '低风险':
               riskData.value.series[0].data[1]={ value: item.value, name: '低风险' ,itemStyle:{color: '#91cc75'} }
              break;
            case '中风险':
              riskData.value.series[0].data[2]={ value: item.value, name: '中风险' ,itemStyle:{color: '#fac858'} }
              break;
            case '高风险':
              riskData.value.series[0].data[3]={ value: item.value, name: '高风险' ,itemStyle:{color: '#ee6666'} }
              break;
          }
        })
      }else {
        riskData.value.series[0].data = [
          { value: 0, name: '未知类' ,itemStyle:{color: '#73c0de'}},
          { value: 0, name: '低风险' ,itemStyle:{color: '#91cc75'}},
          { value: 0, name: '中风险' ,itemStyle:{color: '#fac858'}},
          { value: 0, name: '高风险' ,itemStyle:{color: '#ee6666'}}
        ]
      }
      echarts.init(document.getElementById('riskChart')).setOption(riskData.value)
    })
    getAgeCount(params).then(res=>{
      // console.log("年龄数据统计",res)

      ageData.value.series[0].data = [0, 0, 0, 0, 0, 0, 0,0,0,0]
      if(res.data.length>0){
        let ageDatas = res.data
        ageDatas.forEach(item=>{

          switch (item.ageGroup) {
            case "0-9岁":
              ageData.value.series[0].data[0] = item.value
              break;
            case '10-19岁':
              ageData.value.series[0].data[1] = item.value
              break;
            case '20-29岁':
              ageData.value.series[0].data[2] = item.value
              break;
            case '30-39岁':
              ageData.value.series[0].data[3] = item.value
              break;
            case '40-49岁':
              ageData.value.series[0].data[4] = item.value
              break;
            case '50-59岁':
              ageData.value.series[0].data[5] = item.value
              break;
            case '60-69岁':
              ageData.value.series[0].data[6] = item.value
              break;
            case '70-79岁':
              ageData.value.series[0].data[7] = item.value
              break;
            case '80-89岁':
              ageData.value.series[0].data[8] = item.value
              break;
            case '90岁+':
              ageData.value.series[0].data[9] = item.value
              break;
          }
        })
      }
      echarts.init(document.getElementById('ageChart')).setOption(ageData.value)
    })

  }

  //切换地址
  const chooseAddress = (item)=>{
    // console.log("item=========",item)
    if(beforeAddress.value.length!==0 && beforeAddress.value[beforeAddress.value.length-1].code !== item.code){
      beforeAddress.value=[]
    }else{
      beforeAddress.value.pop()
    }
    if(activeAddress.value.length<4){
      activeAddress.value.push(item);

    }else {
      activeAddress.value[activeAddress.value.length-1]=item;
    }
    getAddressInfo();
  }
  //后退地址
  const modifyAddress = (item)=>{
    if(activeAddress.value.length>0) {
      // beforeAddress.value[activeAddress.value.length - 1] = activeAddress.value[activeAddress.value.length - 1]
      beforeAddress.value.push(activeAddress.value[activeAddress.value.length - 1]);
      activeAddress.value.pop();
    }else{
      activeAddress.value=[]
    }

    // console.log("beforeAddress",beforeAddress.value)
    // console.log("activeAddress",activeAddress.value)
    getAddressInfo();
  }
  //前进地址
  const forAddress = (item)=>{
    if(beforeAddress.value.length>0  ){
      activeAddress.value.push(beforeAddress.value[beforeAddress.value.length-1]);
      beforeAddress.value.pop();
    }else{
      beforeAddress.value=[]
    }
    // console.log("beforeAddress",beforeAddress.value)
    // console.log("activeAddress",activeAddress.value)
    getAddressInfo();
  }

  //显示筛查点加载
  const siteShow = ref(false);

  //获取数据
  const getAddressInfo = ()=>{

    let data = {
      "publicKey": "SCREEN_SITE_INFO",
      "publicValue": JSON.stringify(activeAddress.value)
    }
    setDefaultAddr(data).then(res=>{
      // console.log("修改默认地址信息",res)
      // addressInfo.value = res.data
    })
    if(activeAddress.value.length === 0){

      getProvinceList().then(res=>{
         // console.log("获取到省份",res)
        addressInfo.value= res.data
      })
    }
    if(activeAddress.value.length ===1){

      getCityList(activeAddress.value[0].name).then(res=>{
         // console.log("获取到城市",res)
        addressInfo.value = res.data
      })

    }
    if(activeAddress.value.length ===2){
      getDisrictList(activeAddress.value[1].name).then(res=>{
        // console.log("获取到区域",res)
        addressInfo.value = res.data
      })

    }
    if(activeAddress.value.length >=3){
      // console.log("获取到筛查点",activeAddress.value[2].name)
      siteShow.value = true
      getSiteByAddr(activeAddress.value[2].name).then(res=>{
        // console.log("获取到地址信息",res)
        if(res.data==null || res.data===''){
          addressInfo.value = []
        }else{
          addressInfo.value = res.data
        }

        siteShow.value = false
      })

    }

    getData();
    // if(activeAddress.value.length>3){
    //
    // }
  }
  let intervalId = null;
  onMounted(() => {
    intervalId = setInterval(updateTime, 1000);
    getDefaultAddr().then(res=>{
      // console.log("获取到默认地址",res)
      if(res.code === 200){
        if(res.data==null || res.data===''){
          activeAddress.value = []
        }else{
          activeAddress.value = JSON.parse(res.data)
        }

        // console.log("activeAddress=====",activeAddress.value)
        getAddressInfo()
      }
    })
    echarts.init(document.getElementById('riskChart')).setOption(riskData.value)
    echarts.init(document.getElementById('ageChart')).setOption(ageData.value)
    // echarts.init(document.getElementById('riskChart')).dispatchAction({
    //     type: 'highlight',
    //     seriesIndex: 0,
    //     dataIndex: 0
    // });
    // echarts.init(document.getElementById('riskChart')).dispatchAction({
    //     type: 'showTip',
    //     seriesIndex: 0,
    //     dataIndex: 0
    // });

  });

  const date = computed(()=>{
    const date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  })

  const getTime = ()=>{
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${hours}:${minutes}:${seconds}`;
  }
  const time = ref("00:00:00")

  const updateTime = ()=>{
      time.value = getTime()
  }

  const week =  computed(()=>{
    const daysOfWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    const date = new Date();
    const dayIndex = date.getDay();
    return daysOfWeek[dayIndex];
  })
  onBeforeMount(()=>{
    if(intervalId){
      clearInterval(intervalId)
    }

  })

  //检索条件
  const search = reactive([
    {
      name: '今日数据',
      value: 0
    },
    {
      name: '本周数据',
      value: 1
    },
    {
      name: '本月数据',
      value: 2
    },
    {
      name: '本年数据',
      value: 3
    },
    {
      name: '全部数据',
      value: -1
    }
  ])
  const searchItem = ref(-1)

  //切换检索条件
  const changeSearchItem = (value) => {
    searchItem.value = value
    getData();
  }

</script>
<style scoped lang="scss">
  .container{
    width: 100%;
    height: 100vh;
    background: url("@/assets/images/bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .top{
    width: 100%;
    height: 120px;
    background: url("@/assets/images/topBg.png") no-repeat;
    background-size: 100% 100%;
  }
  .top-title{
    font-family: Alimama ShuHeiTi;
    font-size: 44px;
    font-weight: bold;
    line-height: 75px;
    text-align: center;
    letter-spacing: 4.4px;
    color: #FFFFFF;
  }
  .top-left{
   /* 自动布局子元素 */
    position: absolute;
    right: 50px;
    top: 20px;
    //width: 372px;
    height: 32px;
    /* 自动布局 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 40px;
    z-index: 2;
    font-size: 24px;
    font-weight: normal;
    line-height: 32px;
    letter-spacing: 0px;
    color: #45A2FF;
  }
  .lable{

    width: 98%;
    height: 80px;
    background: url("@/assets/images/lableBg.png") no-repeat;
    background-size: 100% 100%;
    margin: 0px 1%;



  }
  .lable :deep(.border-box-content){
    display: flex;
    align-items: center;
    padding: 0 35px;
    justify-content: space-between;
  }
  .addrs{
    display: flex;
    align-items: center;
  }
  .addr{
    min-width: 110px;
    height: 35px;
    padding-left: 40px;
    background: url("@/assets/images/right-row.png") no-repeat;
    background-size: 20px 35px;
    font-family: 思源黑体;
    font-size: 30px;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0px;
    /* 外部/text/1 */
    color: rgba(255, 255, 255, 0.87);
    margin-right: 30px;
  }
  .content {
    width: 98%;
    height: calc(100vh - 250px);
    margin: 30px 1% 0px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: self-start;
  }
  .operate{
    width: 120px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .operate>div{
    width: 50px;
    height: 50px;
    background: url("@/assets/images/back-a.png") no-repeat;
    background-size: 100% 100%;
  }
  .operate>div:hover{
    width: 50px;
    height: 50px;
    background: url("@/assets/images/back-b.png") no-repeat;
    background-size: 100% 100%;
  }
  .for{
    transform: scaleX(-1);
  }
  /**
   * 内容左边
   */
  .content-left{
    width: 16%;
    height: 100%;
    background: url("@/assets/images/content-left.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 30px 20px;
    .content-left-top{
      width: 100%;
      height: 65px;
      background: url("@/assets/images/miniLable.png") no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      :deep(.border-box-content){
        display: flex;
        align-items: center;
        padding-left: 20px;
      }
      .addr-lable{
        min-width: 110px;
        height: 35px;
        line-height: 35px;
        padding-left: 40px;
        background: url("@/assets/images/right-row.png") no-repeat;
        background-size: 20px 35px;
        font-family: 思源黑体;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0px;
        /* 外部/text/1 */
        color: rgba(255, 255, 255, 0.87);
      }
    }
    .content-left-info{
      width: 100%;
      height: calc(100% - 75px);
      box-sizing: border-box;
      margin-top: 20px;
      overflow: hidden;
      .infinite-list{
        width: 100%;
        height: 100%;
        padding: 0;
        .addr-info-item{
          width: 100%;
          height: 50px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: start;
          //padding: 0 20px;
          box-sizing: border-box;
          cursor: pointer;
          .addr-info-item-title{
            width: 25%;
            font-family: 思源黑体;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            line-height: 20px;
            letter-spacing: 0px;
            color: #00FFE0;
          }
          .addr-info-item-name{
            width: 75%;
            font-family: 思源黑体;
            font-size: 16px;
            font-weight: bold;
            line-height: 20px;
            letter-spacing: 0px;
            color: #FFFFFF;

          }
        }

        .addr-info-item-unactive{
          background:  url("@/assets/images/addr-bg-a.png") no-repeat;
          background-size: 100% 100%;
        }
        .addr-info-item-active{
          background:  url("@/assets/images/addr-bg-b.png") no-repeat;
          background-size: 100% 100%;
        }
        .addr-info-item:hover{
          background:  url("@/assets/images/addr-bg-b.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  /*
   内容右边
   */
  .content-right{
    width: 83%;
    height: 100%;
    background: url("@/assets/images/content-right.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: self-start;

    /*检索条件*/
    .search{
      width: 50%;
      height: 10%;
      background-size: 100% 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .search-item{
        width: 150px;
        height: 45px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 思源黑体;
        font-size: 16px;
        cursor: pointer;
      }
      .unactive{
        background: url("@/assets/images/search-a.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 500;
        /* 外部/V1 */
        color: #29F1FA;
      }
      .active{
        background: url("@/assets/images/search-b.png") no-repeat;
        background-size: 100% 100%;
        color: #FFFFFF;
        font-weight: normal;
      }
    }
    /*显示信息*/
    .info{
      width: 100%;
      height: 90%;
      padding: 0 20px 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      /* 风险等级模块*/
      .risk{
        width: 49.5%;
        height: 100%;
        background: url("@/assets/images/riskBg.png") no-repeat;
        background-size: 100% 100%;

        /*风险等级标题部分*/
        .risk-top{
          width: 100%;
          height: 10%;
          //background-color: #45A2FF;
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          
          .risk-title{
            width: 36%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            div{
              min-width: 100px;
              height: 40px;
              line-height: 40px;
              color: rgba(255, 255, 255, 0.87);
              font-size: 22px;
              font-weight: bold;
              padding-left: 50px;
              background: url("@/assets/images/countbg.png") no-repeat;
              background-size: 40px 40px;
            }

          }
          .decoration3{
            width: 64%;
            height: 100%;
            margin-top: -15px;
          }
          
        }
        /*风险等级统计饼图*/
        .risk-info{
          width: 100%;
          height: 90%;
          padding: 10px 25px 25px;
          #riskChart{
            width:100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      /* 审核-年龄模块*/
      .check-age{
        width: 49.5%;
        height: 100%;

        .check{
          width: 100%;
          height: 35%;
          .check-title{
            width: 300px;
            height: 65px;
            background: url("@/assets/images/miniLable.png") no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
          }
          .check-info{
            width: 100%;
            height: calc(100% - 105px);
            background: url("@/assets/images/check-bg.png") no-repeat;
            background-size: 100% 100%;
            margin: 20px 0;
            padding: 30px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .check-info-nav{
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .check-info-item{
              width: 31%;
              height: 100%;
              background: url('@/assets/images/checkBg.png') no-repeat;
              background-size: 100% 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              color: #FFFFFF;
            }
            .check-info-item-num{
              font-family: 思源黑体;
              font-size: 30px;
              font-weight: bold;
              line-height: 45px;
              letter-spacing: 0px;
            }
            .check-info-item-title{
              /* 自动布局子元素 */
              font-family: 思源黑体;
              font-size: 16px;
              font-weight: normal;
              line-height: 30px;
              letter-spacing: 0px;
            }
          }
        }
        .age{
          width: 100%;
          height: 65%;
          box-sizing: border-box;
          .age-title{
            width: 300px;
            height: 65px;
            background: url("@/assets/images/miniLable.png") no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
          }
          .age-info{
            width: 100%;
            height: calc(100% - 85px);
             background: url("@/assets/images/age-bg.png") no-repeat;
            background-size: 100% 100%;
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
            #ageChart{
              width:100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
        :deep(.border-box-content){
          display: flex;
          align-items: center;
          padding-left: 20px;
        }
        .check-lable{
          min-width: 110px;
          height: 35px;
          line-height: 35px;
          padding-left: 40px;
          background: url("@/assets/images/right-row.png") no-repeat;
          background-size: 20px 35px;
          font-family: 思源黑体;
          font-size: 20px;
          font-weight: bold;
          letter-spacing: 0px;
          /* 外部/text/1 */
          color: rgba(255, 255, 255, 0.87);
        }
      }
    }
  }


</style>


